<template>
  <div class="indexContainer">
    <van-sticky :offset-top="0" class="fixed">
      <!-- 头部 -->
      <div class="header">
        <img class="headerImg" src="@/assets/images/logo.jpg" />
        <div class="search" @click="toSearch">
          <div class="searchDiv">
            <van-image class="searchImg" src="../../../public/static/search.webp" />
            搜索商品，共144565件好物
          </div>
        </div>
        <van-button class="btn" plain type="danger" size="mini" @click="toLogin">登录</van-button>
      </div>

      <!-- 导航条 -->
      <!-- v-model:active="active" -->
      <van-tabs class="nav" title-active-color="red" @click-tab="changeNav">
        <van-tab title="推荐"></van-tab>
        <van-tab
          :title="cate1.name"
          :name="cate1.id"
          v-for="(cate1, index) in channelData.categoryList"
          :key="cate1.id"
        ></van-tab>
      </van-tabs>
    </van-sticky>

    <!-- 主体轮播 -->
    <div v-if="currentIndex === 0" class="card">
      <div class="main">
        <!-- 头部轮播图 -->
        <van-swipe class="bannerSwipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(banner, index) in indexData.focusList" :key="banner.id">
            <van-image class="bannerImg" :src="banner.picUrl" />
          </van-swipe-item>
        </van-swipe>

        <!-- iconList -->
        <div class="iconList">
          <div class="iconItem" v-for="(policyDesc, index) in indexData.policyDescList" :key="index">
            <van-image class="iconImg" :src="policyDesc.icon" />
            <div class="iconText">{{ policyDesc.desc }}</div>
          </div>
        </div>

        <!--categoryList -->
        <div class="categoryList">
          <div class="categoryItem" v-for="(kingKong, index) in indexData.kingKongModule?.kingKongList" :key="index">
            <van-image class="categoryImg" :src="kingKong.picUrl" />
            <div class="categoryText">{{ kingKong.text }}</div>
          </div>
        </div>

        <!-- hot-finally -->
        <div class="hotSale">
          <!-- 上 -->
          <div class="hotSaleTop">
            <!-- 背景图框 -->
            <div class="back">
              <!-- 轮播图框 -->
              <div class="img">
                <!-- 轮播图区域 -->
                <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
                  <!-- 轮播图item -->
                  <van-swipe-item
                    v-for="(index1, index) in indexData.bigPromotionModule?.floorList[0].cells[0].itemList"
                    :key="index1.id"
                  >
                    <img class="backImg" :src="index1.picUrl" />
                  </van-swipe-item>
                </van-swipe>
              </div>
            </div>
          </div>
          <div class="hotSaleBottom">
            <div class="backItem" v-for="(item, index) in 3" :key="index">
              <van-image
                class="backItemImg"
                src="https://yanxuan-item.nosdn.127.net/54a2767366cbd6f367ef0352ff5c072a.png?quality=75&type=webp&imageView&thumbnail=160x160"
              />
            </div>
          </div>
        </div>

        <!-- 新人专享 -->
        <van-divider :style="{ color: '#333333', borderColor: '#333333', padding: '0 16px', fontSize: '18px' }">
          新人专享礼
        </van-divider>

        <div class="new">
          <div class="newLeft">
            <div class="leftTitle">新人专享礼包</div>
            <div class="leftBottom">
              <van-image class="leftBottomImg" src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" />
            </div>
          </div>
          <div class="newRight">
            <div class="newRightItem" v-for="(c2, index) in indexData.indexActivityModule" :key="index">
              <div class="newRightUp">
                <div class="newRightUpLeft">
                  <div class="title">{{ c2.title }}</div>
                  <div class="content">{{ c2.subTitle }}</div>
                </div>
                <van-image class="img" :src="c2.showPicUrl" />
              </div>
            </div>
          </div>
        </div>

        <!-- classifyHotSaleList -->
        <div class="classifyHotSaleList">
          <div class="title">{{ recommendData.title }}</div>

          <div class="list">
            <!-- 热销榜上 -->
            <div class="top">
              <div class="left" v-for="(header, index) in homeStore.headerRes" :key="index">
                <div class="text">{{ header.categoryName }}</div>
                <van-image class="img" :src="header.picUrl" />
              </div>
            </div>

            <div class="bottom">
              <div class="bottomItem" v-for="(footer, index) in homeStore.footerRes" :key="index">
                <div class="bottomItemText">{{ footer.categoryName }}</div>
                <van-image class="bottomItemImg" :src="footer.picUrl" />
              </div>
            </div>
          </div>
        </div>

        <!-- soldOut -->
        <div class="soldOut">
          <div class="soldOutItem" v-for="item in 2">
            <div class="soldOutItemTop">
              <div class="title">不要生气</div>
              <div class="content">生气给魔鬼留余地</div>
            </div>
            <div class="soldOutItemBottom">
              <van-image class="img" src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" />
              <van-image class="img" src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" />
            </div>
          </div>
        </div>

        <div class="footer">
          <div class="footerTop">
            <div class="footerTopLeft">下载APP</div>
            <div class="footerTopRight">电脑版</div>
          </div>
          <div class="footerBottom">
            <div class="top">网易公司版权所有&nbsp;&copy;&nbsp;1997-2023</div>
            <div class="bottom">视频经营许可证:&nbsp;JY13301080111719</div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="card single">
      <div class="main">
        <!-- 头部轮播图 -->
        <van-swipe class="bannerSwipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(banner1, index) in channelData.currentCategory.bannerList" :key="banner1.id">
            <van-image class="bannerImg" :src="banner1.picUrl" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <Floor v-for="cate2 in channelData.categoryItemList" :key="cate2.id" :cate2="cate2"></Floor>
    </div>
    <van-back-top class="custom">^</van-back-top>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Floor from './components/Floor/index.vue'
import router from '@/router'
export default defineComponent({
  data() {
    return {}
  },
  name: 'Home',
  components: {
    Floor
  },
  methods: {}
})
</script>
<script lang="ts" setup>
import { useHomeStore } from '@/stores/modules/home'
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
const homeStore = useHomeStore()
const { indexData, recommendData, channelData } = storeToRefs(homeStore)
const currentIndex = ref<number>(0)
const idList = ref<number>(1005000)
const getIndexData = () => {
  homeStore.getIndexData()
}
const recommendData1 = () => {
  homeStore.getRecommendData()
}
const channelData1 = () => {
  homeStore.getChannelData(idList.value)
}
const changeNav = (name: any) => {
  // console.log(name,title)
  console.log(name.name)

  // console.log(index)
  homeStore.getChannelData(name.name)
  currentIndex.value = name.name
}

const toLogin = async () => {
  router.push('/login')
}

const toSearch = async () => {
  router.push('search')
}

onMounted(() => {
  channelData1()
  getIndexData()
  recommendData1()
})
</script>

<style lang="less" scoped>
.indexContainer {
  height: 100%;
  width: 100%;
  box-sizing: content-box;
  overflow: hidden;
  .fixed {
    .header {
      background-color: white;
      width: 100%;
      height: 44px;
      display: flex;
      align-items: center;
      .headerImg {
        width: 69px;
        height: 20px;
        margin-right: 8px;
        margin-left: 8px;
      }
      .search {
        flex: 1;
        .searchDiv {
          height: 28px;
          line-height: 28px;
          background-color: #f4f4f4;
          border-radius: 5px;
          text-align: center;
          color: #666;
          font-size: 14px;
          .searchImg {
            width: 14px;
            height: 14px;
          }
        }
      }
      .btn {
        margin-left: 8px;
        white-space: nowrap;
        margin-right: 8px;
      }
    }
    .nav {
      height: 44px;
      // background-color: pink;
      :deep(.van-tabs__line) {
        background-color: red;
      }
    }
  }
  // .bannerSwipe .van-swipe-item {
  //   color: #fff;
  //   font-size: 20px;
  //   line-height: 150px;
  //   text-align: center;
  //   background-color: #39a9ed;
  // }
  .card {
    height: auto;
    &.single {
      background-color: #eee;
    }
    .main {
      .bannerSwipe {
        height: 185px;
        background-color: pink;
        .bannerImg {
          width: 100%;
          height: 100%;
        }
      }

      .iconList {
        height: 36px;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .iconItem {
          width: 100%;
          display: flex;
          justify-content: center;
          .iconImg {
            width: 16px;
            height: 16px;
          }
          .iconText {
            font-size: 12px;
          }
        }
      }
      .categoryList {
        width: 100%;
        margin-bottom: 5px;
        display: flex;
        flex-wrap: wrap;
        .categoryItem {
          width: 20%;
          height: 78px;
          text-align: center;
          margin-bottom: 10px;
          .categoryImg {
            width: 55px;
            height: 55px;
          }
          .categoryText {
            margin-top: 5px;
            font-size: 12px;
          }
        }
      }
      .hot {
        margin-top: 20px;
        width: 100%;
        height: 110px;
        display: flex;
        justify-content: space-around;
        // flex: 1;
        .hotItem {
          background-image: url(https://yanxuan.nosdn.127.net/static-union/168007281899b6d3.png?quality=75&type=webp&imageView&thumbnail=250x0);
          background-size: 100% 100%;
          width: 115.5px;
          height: 110px;
          flex-shrink: 0;
          position: relative;
          .hotImg {
            position: absolute;
            width: 70px;
            height: 70px;
            bottom: 0;
            left: 20px;
          }
        }
      }

      .hotSale {
        width: 100%;
        height: 230px;
        // background-color: #999999;
        .hotSaleTop {
          width: 100%;
          height: 99px;
          // background-color: pink;
          .back {
            height: 99px;
            background-image: url('https://yanxuan.nosdn.127.net/static-union/168059808822a8e6.gif?imageView&quality=75');
            background-size: 100% 100%;
            background-position: 0 10px;
            background-repeat: no-repeat;
            position: relative;
            .img {
              width: 85px;
              height: 85px;
              position: absolute;
              top: 20px;
              left: 40px;
            }
            .my-swipe .van-swipe-item {
              position: relative;

              line-height: 99px;
              .backImg {
                width: 85px;
                height: 85px;
                top: 15px;
                left: 35px;
              }
            }
          }
        }
        .hotSaleBottom {
          margin-top: 10px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .backItem {
            flex: 1;
            margin: 0 5px;
            width: 33%;
            height: 110px;
            // border: 1px solid red;
            // background-color: yellowgreen;
            background-image: url('https://yanxuan.nosdn.127.net/static-union/16805987434a5424.png?quality=75&type=webp&imageView&thumbnail=250x0');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;
            .backItemImg {
              width: 70px;
              height: 70px;
              top: 40px;
              right: -20px;
            }
          }
        }
      }
      .new {
        display: flex;
        justify-content: space-evenly;
        height: 217px;
        background-color: #eee;
        .newLeft {
          // text-align: center;
          background-color: #f9e9cf;
          width: 172px;
          height: 217px;
          .leftTitle {
            width: 100%;
            margin-left: 15px;
            margin-top: 15px;
            font-size: 16px;
          }
          .leftBottomImg {
            width: 129px;
            height: 129px;
            top: 22px;
            left: 22px;
          }
        }
        .newRight {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          width: 172px;
          .newRightItem {
            .newRightUp {
              display: flex;
              justify-content: space-around;
              height: 107px;
              background-color: #fbe2d3;
              &.down {
                background-color: #f9e9cf;
              }
              .img {
                width: 100px;
                height: 100px;
              }
              .newRightUpLeft {
                margin-top: 10px;
                margin-left: 15px;
                .title {
                  font-size: 14px;
                }
                .content {
                  font-size: 12px;
                  color: rgb(127, 127, 127);
                  &.single {
                    background-color: #ccc;
                    color: white;
                  }
                }
              }
            }
          }
        }
      }
      .classifyHotSaleList {
        .title {
          height: 50px;
          line-height: 50px;
          padding: 0 15px;
          font-size: 16px;
        }
        .list {
          margin: 0 10px 10px 15px;
          .top {
            width: 100%;
            height: 100px;
            display: flex;
            .left {
              margin-right: 5px;
              width: 170px;
              background-color: #f9f3e4;
              display: flex;
              .text {
                font-size: 12px;
                height: 100px;
                height: 100px;
                line-height: 100px;
                margin-left: 5px;
              }
              .img {
                width: 100px;
                height: 100px;
              }
            }
          }
          .bottom {
            // margin-top: 5px;
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-around;
            .bottomItem {
              width: 82.5px;
              height: 90px;
              margin-top: 5px;
              background-color: #f5f5f5;
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-right: 5px;
              .bottomItemText {
                font-size: 12px;
                margin-top: 5px;
              }
              .bottomItemImg {
                width: 60px;
                height: 60px;
                margin-top: 5px;
              }
            }
          }
        }
      }

      .soldOut {
        padding: 5px 15px 15px 13px;
        display: flex;
        justify-content: space-around;
        .soldOutItem {
          background-color: #f5f5f5;
          padding: 10px 0 0 10px;
          margin: 2px 0 0 2px;
          .soldOutItemTop {
            .title {
              font-size: 16px;
            }
            .content {
              font-size: 12px;
            }
          }
          .soldOutItemBottom {
            display: flex;
            .img {
              width: 75px;
              height: 75px;
              margin-right: 2px;
            }
          }
        }
      }

      .footer {
        background-color: #414141;
        width: 100%;
        color: white;
        padding: 27px 10px 14px;
        display: flex;
        flex-direction: column;
        .footerTop {
          display: flex;
          font-size: 14px;
          height: 30px;
          justify-content: center;
          margin-bottom: 18px;
          .footerTopLeft {
            width: 86px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid white;
            margin-right: 25px;
          }
          .footerTopRight {
            width: 86px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid white;
          }
        }
        .footerBottom {
          font-size: 12px;
          color: #999999;
          text-align: center;
        }
      }
      .tabBarH {
        height: 50px;
        width: 375px;
        background-color: red;
      }
    }
  }
  :deep(.van-back-top) {
    height: 10px;
    background-color: #f5f5f5;
  }
}
</style>
<style lang="less">
.custom {
  width: 41px;
  height: 41px;
  line-height: 41px;
  font-size: 24px;
  text-align: center;
  right: 20px;
  bottom: 70px;
  background-color: rgba(251, 247, 247, 0.5);

  // :deep(.van-back-top) {
  //   background-color: red;
  // }
  // :deep(.van-back-top-background[van-back-top]){
  //   background: white;
  // }
  // background-color: var(--van-back-top-background);
  // :deep(--van-blue):white

  // .van-back-top .van-back-top--active .custom{
  //   background-color: white;
  // }
}
// :deep(.van-back-top){
//   background-color: #f5f5f5 !important;
// }
</style>
